<script setup lang="tsx">
interface IProps {
  node?: (a: number) => VNode
}

const props = defineProps<IProps>()

const slots = defineSlots()

const a = ref(1)
const list = ref([
  { name: '张三' },
  { name: '李四' },
])

function render() {
  return (
    <div>
      <h1>我是tsx子组件--2</h1>
      <div>{ slots.default?.(toValue(a)) }</div>
      <hr />
      <div>{ slots.content?.() }</div>

      { props.node?.(toValue(a)) }

      {
        toValue(a) === 1
          ? <div>111</div>
          : <div>222</div>
      }

      <ul>
        { toValue(list).map((item, index) => {
          return (
            <li key={index}>
              {item.name}
            </li>
          )
        }) }
      </ul>
    </div>
  )
}
</script>

<template>
  <component :is="render()" />
</template>
